<template>
    <van-nav-bar :title="alertext" safe-area-inset-top	@click-left="onClickLeft" left-text="返回" fixed="'true" placeholder left-arrow>

    </van-nav-bar>
    <div>
        <van-popup v-model:show="showPicker" round >
            <van-picker
                    :columns="columns"
                    @cancel="showPicker = false"
                    @confirm="onConfirm"
            />
        </van-popup>
    </div>
    <van-form @submit="onSubmit">
        <van-cell-group inset>
            <van-field
                    v-model="prjname"
                    name="项目名称"
                    label="项目名称"
                    placeholder="请输入项目名称"
                    readonly
            />
            <van-field
                    v-model="prjcode"
                    readonly
                    type="number"
                    name="code"
                    label="项目编码"
                    placeholder="请点击搜索选择项目"
            />
        </van-cell-group>
        <van-highlight :keywords="zfdbkey" :source-string="zfdbtext" style="padding: 3%;"/>
        <div style="margin: 16px;">
            <van-button round block type="primary" native-type="submit">
                发送验证信息
            </van-button>
        </div>
    </van-form>
</template>


<script>
    // 1. 引入你需要的组件
    import { NavBar ,Form, Field, CellGroup,Picker ,Popup ,showToast ,RadioGroup, Radio ,Button ,showDialog ,Highlight} from 'vant';
    // 2. 引入组件样式
    import 'vant/lib/index.css';
    import { ref } from 'vue';
    import axios from "axios";

    export default {
        setup() {
            const onClickLeft = () => history.back();
            const prjname = ref('');
            const prjcode = ref('');
            const zfdbtext = ref('');
            const zfdbkey = ref('');
            return {
                zfdbtext,
                zfdbkey,
                onClickLeft,
                prjname,
                prjcode
            }
        },
        data() {
            return {
                keyword: '',
                selectedValue: '',
            };
        },
        mounted() {
            axios.post('http://bs.bzjsgl.cn/wxapi/Messagetemplate/projectzfdbInfo',{code: this.$route.query['code']})
                .then(res => {
                    
                    if (res.data['code'] === 20000) {
                        this.prjname = res.data['data']['name']
                        this.prjcode = res.data['data']['code']
                        this.zfdbtext = '您将授权获取项目['+res.data['data']['name']+']的工程支付担保的相关数据,如您同意请点击发送验证信息，将收到的验证信息填写到工程支付担保验证页面'
                        this.zfdbkey =[res.data['data']['name'], '支付担保'] 
                        console.log(this.prjname)
                    }
                })
                .catch(function (error) { // 请求失败处理
                    console.log(error)
                })
        },
        methods: {
             onSubmit(){
                axios.post('http://bs.bzjsgl.cn/wxapi/Messagetemplate/add_zfdb_shouquan',{
                        openid: this.$route.query['openid'],
                        prjcode:this.prjcode,
                        userId: this.$route.query['userId']
                    })
                    .then(res => {
                        if (res.data['code'] === 20000) {
                            showDialog({
                                message: res.data['msg'],
                                theme: 'round-button',
                            }).then(() => {
                                this.$router.push('/?openid='+this.$route.query['openid'])
                              //  history.back()
                                // location.reload()
                            });

                        }
                    })
                    .catch(function (error) { // 请求失败处理
                        console.log(error)
                    })
            }
        },
        components: {
            [NavBar.name]: NavBar,
            [Form.name]: Form,
            [Field.name]: Field,
            [CellGroup.name]: CellGroup,
            [Picker.name]: Picker,
            [Popup.name]: Popup,
            [showToast.name]:showToast,
            [RadioGroup.name]: RadioGroup,
            [Radio.name]: Radio,
            [Button.name]: Button,
            [showDialog.name]:showDialog,
            [Highlight.name]:Highlight
        }
    }
</script>

